<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo" v-if="listStart">
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>图片</td>
            <td>价格</td>
            <td>进货价格</td>
            <td>保质日期</td>
            <td>重量</td>
            <td>库存</td>
            <td>类型</td>
            <td>地区</td>
            <td>上架</td>
            <td>热门</td>
            <td>推荐</td>
            <td>关键字</td>
            <td>关联数据</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{item.goods_sn}}</td>
            <td class="txtLeft">{{item.goods_name}}</td>
            <td><img class="logo" :src='item.goods_logo'></td>
            <td>{{item.goods_price}}</td>
            <td>{{item.market_price}}</td>
            <td>{{item.goods_created_at}}</td>
            <td>{{item.goods_weight}}</td>
            <td>{{item.goods_number}}</td>
            <td>{{item.category.category_name}}</td>
            <td v-if="item.goods_zone">{{item.goods_zone.zone_name}}</td>
            <td>{{item.is_sale|tpye}}</td>
            <td>{{item.is_hot|tpye}}</td>
            <td>{{item.is_recommend|tpye}}</td>
            <td>{{item.keyword}}</td>
            <td>
              <a @click="getImg(item)">商品相册</a>
              <a @click="getMsg(item)">商品说明</a>
            </td>
            <td>
              <a @click="getMore(item)">修改商品</a>
              <a @click="getDelete(item)">删除商品</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pageList" v-if="!showStart">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableNum" :total="tableCont">
        </el-pagination>
      </div>
      <!--修改商品-->
      <div class="itemInfo" v-if="showStart">
        <div class="formBox">
          <p class="item"><span class="name">商品名称 ：</span><input v-model="date.goods_name" class="slong" placeholder="请输入内容"></input></p>
          <p class="item"><span class="name">商品图片 ：</span>
              <img class="t2" :src="date.goods_logo">
              <input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
          </p>
          <p class="item"><span class="name">商品价格 ：</span>
              <input v-model="date.goods_price" value="" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item"><span class="name">商品库存 ：</span>
              <input v-model="date.goods_number" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item"><span class="name">商品重量 ：</span>
              <input v-model="date.goods_weight" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item"><span class="name">商品地区 ：</span>
              <select v-model="date.zone_id">
                <option v-for="(item,index) in prcType" :value="item.id">{{item.zone_name}}</option>
              </select>
          </p>
          <p class="item"><span class="name">是否上架 ：</span>
              <select v-model="date.is_sale">
                <option value="1">上架</option>
                <option value="2">下架</option>
              </select>
          </p>
          <p class="item"><span class="name">是否热门 ：</span>
              <select v-model="date.is_hot">
                <option value ="1">热门</option>
                <option value ="2">不热门</option>
              </select>
          </p>
          <p class="item"><span class="name">是否推荐 ：</span>
              <select v-model="date.is_recommend">
                <option value ="1">推荐</option>
                <option value ="2">不推荐</option>
              </select>
          </p>
          <p class="item"><span class="name">搜索关键字 ：</span>
              <input type="text" v-model="date.keyword" name="" placeholder="请输入内容">
          </p>
          <p class="item inputBox">
            <button @click="submit" class="submitInput">确定</button>
            <button @click="empty" class="emptyInput">取消</button>
          </p>
        </div>
      </div>
    </div>
    <!--商品相册-->
    <div class="itemInfo" v-if="imgStart">
      <div class="imgList">
          <ul>
            <li v-for="item in imgList">
              <span @click="getImgDel(item)"></span>
              <img :src="item.image_preview" alt="">
            </li>  
          </ul>
      </div>
      <div class="formBox">
        <p class="item"><span class="name">添加图片 ：</span>
          <img class="t2" :src="imgBox">
          <input type="file" @change="upImgList" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
        </p>
        <p class="item inputBox">
          <button @click="submitImg" class="submitInput">确定</button>
          <button @click="empty" class="emptyInput">返回</button>
        </p>
      </div>
    </div>
  <!--商品详情-->
    <div class="itemInfo" v-if="descStart">
      <div class="formBox">
        <p class="item"><span class="name">商品详情 ：</span>
          <quill-editor class="textarea" ref='myTextEditor' v-model='imgDesc'></quill-editor>
        </p>
        <p class="item inputBox">
          <button @click="submitDesc" class="submitDesc">确定</button>
          <button @click="empty" class="emptyInput">取消</button>
        </p>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import VueQuillEditor from 'vue-quill-editor'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'
Vue.use(VueQuillEditor)
export default {
  name: 'prcList',
  data() {
    return {
      loading: true,
      tableData: [],
      tableNum: 20, //每页显示多少条
      tableCont: 0, //一共有多少条信息
      tablePage: 1, //当前页码
      listStart: true, //列表窗口
      showStart: false, //修改窗口
      imgStart: false, //相册窗口
      descStart: false, //详情窗口
      prcType:[],
      prcId:'',//商品id
      imgBox:'',//商品单图片
      imgList:'',//商品相册
      imgDesc:'',//商品详情
      type: [],
      date: {
        id: '',
        goods_name: '',
        goods_logo: '',
        goods_price: '',
        goods_weight:'',
        goods_number: '',
        category_id: '',
        zone_id:'',
        is_sale: '',
        is_hot: '',
        is_recommend: '',
        keyword: '',
        goods_sn: '',
        market_price: '',
        goods_created_at: ''
      }
    }
  },
  filters:{
      tpye(vule){
        if(vule=='1'){
          return '是'
        }else{
          return '否'
        }
      }
  },
  mounted() {
    this.getData(this.$route.query.id,1)
    this.getAddress()
  },
  watch:{
      '$route.query.id'(val){

          this.getData(val,1)
      }
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData(e,val) {
      if (this.Check()) {
        let reg=await Get('/goods?_include=category,goods_describe,goods_zone&_sort=-id&zone_id='+e+'&page='+val,this.$store.state.token)
        this.tableData=reg.data
        this.tableCont=reg.meta.pagination.total
        this.loading=false
      }
    },
    //获取地区
    async getAddress() {
      if(this.Check()){
        let reg=await Get('/goods/zone?_sort=id',this.$store.state.token)
        this.prcType=reg.data
      }
    },
    //分页
    handleCurrentChange(val) {
      this.tablePage = val
      this.getData(this.$route.query.id,val)
    },
    //信息详情
    getMore(e) {
      this.date.id = e.id
      this.date.goods_name = e.goods_name
      this.date.goods_logo = e.goods_logo
      this.date.goods_price = e.goods_price
      this.date.goods_weight = e.goods_weight
      this.date.goods_number = e.goods_number
      this.date.category_id = e.category_id
      this.date.zone_id=e.zone_id
      this.date.is_sale = e.is_sale
      this.date.is_hot = e.is_hot
      this.date.is_recommend = e.is_recommend
      this.date.keyword = e.keyword
      this.showStart = true
      this.listStart = false
    },
    //商品相册
    getImg(e) {
      this.imgStart = true
      this.listStart = false
      this.getImgData(e.id)
      this.prcId=e.id
    },
    async getImgData(e){
      if (this.Check()) {
        let reg=await Get('/goods/image/'+e,this.$store.state.token)
        this.imgList=reg.data
      }
    },
    //删除商品相册
    async getImgDel(e){
      if (this.Check()) {
        let reg=await Delete('/goods/image/'+e.id,this.$store.state.token)
        alert('删除成功')
      }
    },
    //商品说明
    getMsg(e) {
      this.descStart = true
      this.listStart = false
      this.getMsgData(e.goods_describe.id)
      this.prcId=e.goods_describe.id
    },
    async getMsgData(e){
        
        if (this.Check()) {
          let reg=await Get('/goods/describe/'+e,this.$store.state.token)
          this.imgDesc=reg.data.describe
        }
    },
    //修改商品详情
    async submitDesc() {
      if (this.Check()) {
          let id=this.prcId
          let data={
            "describe":this.imgDesc
          }
          let reg=await Put('/goods/describe/'+id,this.$store.state.token,data)
          alert('修改成功')
          this.descStart=false
          this.listStart=true
          this.getData()
        }
    },
    //提交修改信息
    async submit() {
      let data;
      if (this.date.goods_logo.length < 100) {
        data = {
          goods_name: this.date.goods_name,
          goods_price: this.date.goods_price,
          goods_weight:this.date.goods_weight,
          goods_number: this.date.goods_number,
          category_id: this.date.category_id,
          is_sale: this.date.is_sale,
          is_hot: this.date.is_hot,
          is_recommend: this.date.is_recommend,
          keyword: this.date.keyword
        }
      } else {
        data = {
          goods_name: this.date.goods_name,
          goods_logo: this.date.goods_logo,
          goods_price: this.date.goods_price,
          goods_weight:this.date.goods_weight,
          goods_number: this.date.goods_number,
          category_id: this.date.category_id,
          is_sale: this.date.is_sale,
          is_hot: this.date.is_hot,
          is_recommend: this.date.is_recommend,
          keyword: this.date.keyword
        }
      }

      let that = this
      let reg=await Put('/goods/'+this.date.id,this.$store.state.token,data)
      alert('修改成功')
      this.showStart = false
      this.listStart=true
      this.getData()

    },
    //添加相册图片
    submitImg() {
      if (this.imgBox.length >100) {
        let data = {
          "image":this.imgBox,
          "goods_id":this.prcId
        }

        let that = this
        axios({
          method: 'post',
          url: that.$store.state.url + '/goods/image',
          headers: { Authorization: "Bearer " + that.$store.state.token },
          data: data
        }).then(function(data) {
          alert('修改成功')
          that.getImgData(that.prcId)
        }, function(errer) {
          alert(errer)
        })
      }
    },
    //取消修改
    empty() {
      this.showStart = false
      this.imgStart = false
      this.descStart = false
      this.listStart = true
    },
    //上传logo
    upImg(e) {
/*      let that = this
      let reader = new FileReader();
      reader.onload = (function(file) {
        return function(e) {
          that.date.goods_logo = this.result
        };
      })(e.target.files[0]);
      reader.readAsDataURL(e.target.files[0]);*/
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.date.goods_logo=this.result 
        } 
      }
    },
    //上传商品相册
    upImgList(e) {
/*      let that = this
      let reader = new FileReader();
      reader.onload = (function(file) {
        return function(e) {
          that.imgBox = this.result
        };
      })(e.target.files[0]);
      reader.readAsDataURL(e.target.files[0]);*/
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.imgBox=this.result 
        } 
      }
    },
    //删除商品
    async getDelete(e) {
      this.$store.dispatch("loadOpen");
      let that=this
      if (this.Check()) {
        await Delete('/goods/' + e.id,this.$store.state.token).then(function(){
          alert('删除成功')
          that.getData(that.$route.query.id,1)
          
        })
      }
      this.$store.dispatch("loadClose");
    }
  }
}

</script>
